import React from 'react';
import CommonTable from '@/common/CommonTable';
import _ from 'lodash';
import { data, tableConfig, options } from './config';
import { Select } from 'antd';

const { Option } = Select;

const SegmentationOperation = () => {
  let status = {};
  let selectKey = {};
  const onChange = (value, record, key) => {
    if (Object.keys(status).length < 1) {
      // 无
      status = {
        [record.ip]: [value],
      };
    } else {
      // 先获取旧的ip的内容
      const oldIp = status[record.ip] || [];
      // 获取上一次选中的数据
      let abc = '';
      for (let i in selectKey) {
        if (i === String(key)) {
          abc = selectKey[i];
        }
      }
      // 把上一次的数据删除掉
      oldIp.forEach((item, key) => {
        if (item === abc) {
          oldIp.splice(key, 1);
        }
      });
      // 继续存储新数据
      status = {
        ...status,
        [record.ip]: [...oldIp, value],
      };
    }
    selectKey = {
      ...selectKey,
      [key]: value,
    };
    console.log(status);
  };
  const tableProps = {
    columns: _.map(tableConfig, (item, key) => {
      const obj = { ...item };
      switch (obj.dataIndex) {
        case 'actions':
          // eslint-disable-next-line react/display-name
          obj.render = (text, record, key) => {
            return (
              <Select
                placeholder="Please select"
                style={{ width: 154 }}
                onChange={(value) => onChange(value, record, key)}
              >
                {options.map((option, index) => (
                  <Option key={option} disabled={index === 3} value={option}>
                    {option}
                  </Option>
                ))}
              </Select>
            );
          };
          break;
        default:
          break;
      }
      return obj;
    }),
    dataSource: data,
    rowKey: 'key',
  };
  return <CommonTable {...tableProps} />;
};

export default SegmentationOperation;
